<template>
  <div>
    <h1>【aty-back-top】 component demo</h1>
    <p>【aty-back-top】 本质</p>
    <aty-row class="fd-back-top-contain">
      <div id="jsTargetContain">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
      </div>
      <aty-back-top :bottom="200" :right="30" :height="300" :duration="2000" @click="click" target="#jsTargetContain" />
    </aty-row>
    <aty-back-top :bottom="20" :right="30" :height="300" :duration="2000" />
  </div>
</template>
<script>
export default {
  methods:{
    click:function () {
      Artery.message.info('已回到顶部')
    }
  }
}
</script>
<style>
    .fd-back-top-contain {
        margin: 20px;
    }
    #jsTargetContain {
        height: 300px;
        border: 1px solid #ddd;
        overflow: auto;
    }
    #jsTargetContain  p {
        height: 50px;
        border-bottom: 1px solid #ddd;
    }
</style>
